<template>
  <div class="p-15px box-border flex items-center flex-nowrap cursor-pointer" :class="[itemStyle]">
    <div class="text-xl mr-5px" :class="[icon]"></div>
    <div v-show="!collapse" class="text-sm">{{ label }}</div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  borderBottom?: boolean
  collapse?: boolean
  label: string
  icon: string
}

const rawProps = withDefaults(defineProps<Props>(), {
  borderBottom: false,
  collapse: false
})
const {icon, label, borderBottom, collapse} = toRefs(rawProps)
const itemStyle = computed(() => {
  return borderBottom.value ? "border-b border-gray-200" : ""
})
</script>

<style scoped>

</style>